<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .title {
        display: flex;
        justify-content: space-around;
        align-items: end;
        padding-top: 30px;
      }
      .title img {
        height: 20px;
        padding-left: 50px;
      }
      .list {
        display: flex;
        margin: 30px 0 0 30px;
      }
      .list-item {
        flex: 1;
        border-right: 1px saddlebrown solid;
        padding-left: 10px;
      }
      .list-item .item-title {
        padding-bottom: 30px;
      }
      .list-item p {
        line-height: 30px;
      }
      .list-item p a {
        color: black;
      }
    </style>
  </head>
  <body>
    <div id="app" style="display: none;" :style="{display: 'block'}">
      <div class="title">
        <h1>{{msg}}</h1>
        <a target="_blank" href="https://gitee.com/cyq459987870/demo-and-demo">
          <img src="./static/gitte-logo.svg" alt="代码" name="代码" />
        </a>
      </div>
      <div class="list">
        <div class="list-item" v-for="(item,index) in list" :key="index">
          <h2 class="item-title">{{item.title}}</h2>
          <p v-for="(i,idx) in item.data" :key="idx">
            {{idx+1}}.<a :href="i.url">{{i.name}}</a>
          </p>
        </div>
      </div>
    </div>
  </body>
  <script src="./utils/vue.js"></script>
  <script src="./static/data.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          msg: "demo and demo",
          screenWidth: document.body.clientWidth,
          list: [
            { title: "HTML", data: [] },
            { title: "CSS", data: [] },
            { title: "JS", data: [] },
            { title: "VUE", data: [] },
            { title: "REACT", data: [] },
          ],
        };
      },
      watch: {
        screenWidth: {
          handler(newValue, oldValue) {
            // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
            if (!this.timer) {
              // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
              this.screenWidth = newValue;
              this.timer = true;
              let that = this;
              setTimeout(function () {
                that.timer = false;
              }, 400);
            }
          },
        },
      },
      mounted() {
        const that = this;
        window.onresize = () => {
          return (() => {
            window.screenWidth = document.body.clientWidth;
            that.screenWidth = window.screenWidth;
          })();
        };
      },
      created() {
        this.list[0].data = htmlData;
        this.list[1].data = cssData;
        this.list[2].data = jsData;
        this.list[3].data = vueData;
        this.list[4].data = reactData;
      },
      methods: {},
    });
  </script>
</html>
